<template>
    <div class="page_container">
        <DataTableBar :data="tableData" :columns="columns" :config="config"
            :total="total" :pages="pages" :loading="loading"
            @search="search" @reset="searchReset" @refresh="refresh"
            @currentChange="currentChange" @sizeChange="sizeChange">
            <template #tableoperbefore>
                <div class="overflow-hidden transition300" :class="[ breadcrumbList.length ? 'breadcrumb_expand' : 'breadcrumb_fold' ]">
                    <div class="breadcrumb_container flex">
                        <el-button type="primary" size="small" plain link @click="backUplevel">
                            <i class="icon-base icon-base-backV2" title="返回上一级"></i>
                        </el-button>
                        <el-breadcrumb separator="/">
                            <el-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="item.id" @click="breadcrumbToPath(item, index)">
                                <span class="cursorPointer">{{ item.folderName }}</span>
                            </el-breadcrumb-item>
                        </el-breadcrumb>
                    </div>
                </div>
            </template>

            <template v-slot:tablerow="scope">
                <el-button type="primary" link class="linkBtn" v-if="scope.row.type == '0'"
                    @click="checkFileFold(scope.row)">查 看</el-button>
                <el-button type="primary" link class="linkBtn" v-else
                    @click="downloadFile(scope.row)">下 载</el-button>
            </template>

            <template v-slot:folderName="scope">
                <p class="flex text-info" v-if="scope.row.type == '0'">
                    <i class="icon-base icon-base-wenjianjia margin-right-sm"></i>
                    <el-button type="primary" link @click="checkFileFold(scope.row)">
                        {{ scope.row.folderName || '-' }}
                    </el-button>
                </p>
                <p class="flex cursorPointer" v-else @click="viewFile(scope.row)">
                    <i class="icon-base icon-base-wendang margin-right-sm"></i>
                    <span>{{ scope.row.folderName || '-' }}</span>
                </p>
            </template>
            <template v-slot:updateDate="scope">
                <span>{{ formatDate.dateTimeAllFormat( scope.row.updateDate || '') }}</span>
            </template>
        </DataTableBar>
        <el-image-viewer hide-on-click-modal @close="openImgView = false" v-if="openImgView" :url-list="imaViewUrlList" />
    </div>
</template>

<script setup>
    // 公司文件
    import { ref, onMounted } from "vue";
    import { ElMessage } from 'element-plus'
    import { formatDate } from "@/utils/fomart"
    import { myfilePages } from "@/api/archives/myfile"
    import DataTableBar from "@/components/DataComponents/DataTableBar.vue"
    const pages = ref({ page_current: 1, page_size: 10 });
    const total = ref(0);
    const loading = ref(false);
    const searchParams = ref({});
    const nowFileFoldId = ref('0');
    const breadcrumbList = ref([]);
    const openImgView = ref(false)
    const imaViewUrlList = ref([]);
    const tableData = ref([]);
    const columns = ref([
        { title: '文件名称',key: 'folderName', minWidth: 250, search: true, tableCustom: true,},
        { title: '所有者', key: 'creatorName', width: 100, align: 'center', },
        { title: '更新时间',key: 'updateDate', width: 180, align: 'center', tableCustom: true, },
    ]);
    const config = ref({
        addBtnHide: true,
        editBtnHide: true,
        removeBtnHide: true,
        operBarHide: true,
        editCustom: true,
    });
    const viewFile = (rowData) => {
        const fileUrl = rowData.fileUrl || '';
        if(!fileUrl) return
        // ElMessage({ type: 'error', message: '暂仅支持图片格式预览', })
        const fileTypeTime = fileUrl.split('.');
        const fileType = fileTypeTime[fileTypeTime.length - 1];
        const imageTypes = [ 'jpg', 'jpeg', 'png', 'webp', 'gif' ]
        const isImage = imageTypes.includes( fileType );
        if(isImage){
            imaViewUrlList.value[0] = fileUrl;
            openImgView.value = true;
        }
    };
    const checkFileFold = (item) => {
        nowFileFoldId.value = item.id;
        breadcrumbList.value.push(item);
        getTablePages();
    };
    const backUplevel = () => {
        const lastIndex = breadcrumbList.value.length - 1;
        const nowItem = breadcrumbList.value[lastIndex - 1];
        nowFileFoldId.value = nowItem ? nowItem.id : '0';
        breadcrumbList.value.splice(lastIndex, 1);
        getTablePages();
    };
    const breadcrumbToPath = (item, index) => {
        if(nowFileFoldId.value == item.id) return
        nowFileFoldId.value = item.id;
        breadcrumbList.value.splice(index + 1, breadcrumbList.value.length);
        getTablePages();
    };
    const downloadFile = (rowData) => {
        if(!rowData.fileUrl){
            ElMessage({ type: 'error', message: '下载内容缺失,暂时无法下载', })
            return
        }
        window.open(rowData.fileUrl)
    };
    const currentChange = (current) => {
        pages.value.page_current = current;
        getTablePages();
    };
    const sizeChange = (size) => {
        pages.value.page_size = size;
        getTablePages();
    };
    const refresh = () => {
        getTablePages();
    };
    const search = (searchParam) => {
        searchParams.value = searchParam.value;
        getTablePages();
    }
    const searchReset = () => {
        searchParams.value = {};
        getTablePages();
    };
    const getTablePages = () => {
        loading.value = true;
        myfilePages({
            current: pages.value.page_current,
            size: pages.value.page_size,
            parentId: nowFileFoldId.value,
            selectType: 'company',
            ...searchParams.value
        }).then(res => {
            tableData.value = res.data.records;
            total.value = res.data.total;
            loading.value = false;
        });
    };
    onMounted(() => { getTablePages(); })
</script>
<style scoped lang="scss">
    :deep(.el-button.is-link){
        padding: 0;
    }
    .breadcrumb_fold{
        height: 0px;
    }
    .breadcrumb_expand{
        height: 34px;
    }
    .breadcrumb_container{
        padding: 5px 0 15px;
        i{
            margin-right: 10px;
            font-size: 18px;
            margin-top: -3px;
        }
    }
</style>